<template>
	<div>
		<ul>
			<li>
				<button @click="getOne()">调用第一种封装</button>
			</li>
			<li>
				<button @click="getTwo()">调用第二种封装</button>
			</li>
			<li>
				<button @click="getThree()">调用第三种封装</button>
			</li>
			<li>
				<button @click="getFour()">调用第四种封装</button>
			</li>
			<li>
				<button @click="getFive()">调用第四种封装带拦截器</button>
			</li>
			<li>
				<button @click="getSix()">调用第四种带拦截器的二次封装</button>
			</li>
			<li>
				<button @click="getSeven()">第四种方法，导出一个axios实例</button>
			</li>
			<li>
				<button @click="getEight()">一个实例的二次封装</button>
			</li>
		</ul>
	</div>
</template>

<script>
	// 多个axios实例的封装，按需导入
	import {
		request1,
		request2,
		request3,
		request4,
		request5
	} from "../utils/request.js"
	// 多个axios实例的二次封装
	import {
		testFun
	} from '../api/test.js'
	
	// 单独一个axios实例的封装，单个的可以用任意变量来接收  如：api
	// import request from '../utils/network.js'
	import api from '../utils/network.js'
	// 单个axios实例的二次封装
	import { defaultTestFun } from "../api/defaultTest.js"
	
	export default {
		name: 'HelloWorld',
		data() {
			return {
				page: '1',
				limit: '10'
			}
		},
		methods: {
			// 第一种封装用法
			getOne() {
				// 第一个参数是config，第二个参数是success函数，第三个参数是err函数
				request1({
						url: '/p/94576097/8aatcntl',
						method: 'post'
					}, res => {
						// success函数
						console.log(res, '第一种封装');
					},
					err => {
						// err函数
					})
			},
			// 第二种封装用法
			getTwo() {
				// 只有一个参数，参数中有baseConfig，success函数，failure函数
				request2({
					baseConfig: {
						url: '/p/94576097/8aatcntl',
						method: 'post'
					},
					success: function(res) {
						console.log(res, '第二种封装');
					},
					failure: function(err) {

					}
				})
			},
			// 第三种封装的用法
			getThree() {
				// 只有一个参数
				request3({
					url: '/p/94576097/8aatcntl',
					method: 'post'
				}).then(res => {
					console.log(res, '第三种封装');
				}).catch(err => {

				})
			},
			// 第四种封装的用法
			getFour() {
				// 只有一个参数
				request4({
					url: '/p/94576097/8aatcntl',
					method: 'post'
				}).then(res => {
					console.log(res, '第四种封装');
				}).catch(err => {

				})
			},
			
			// 基于 第四种封装 的拦截器
			getFive() {
				request5({
					url: '/p/94576097/8aatcntl',
					method: 'post'
				}).then(res => {
					console.log(res, '第四种封装，测试拦截器');
				}).catch(err => {
				
				})
			},
			
			// 第四种带拦截器的二次封装用法，将方式与路径单独封装在一个文件中
			getSix() {
				testFun({page: this.page,limit: this.limit}).then(res => {
					console.log(res, '第四种带拦截器的二次封装');
				}).catch(err => {
			
				})
			},
			
			// 导出一个axios实例
			getSeven(){
				api({
					url: '/p/94576097/8aatcntl',
					method: 'post'
				}).then(res => {
					console.log(res, '第四种方法，导出一个axios实例');
				}).catch(err => {
				
				})
			},
			// 单独导出axios实例的二次封装
			getEight(){
				defaultTestFun().then(res=>{
					console.log(res,'一个实例的二次封装');
				}).catch(err=>{
					
				})
			}
		}
	}
</script>

<style scoped>
	ul li{
		margin-top: 20px;
	}
</style>
